<template>
  <el-radio-group v-if="tagType === 'radio'" :value="getValueSting" :disabled="disabled" @input="handleInput">
    <el-radio v-for="(item, key) in dictOptions" :key="key" :label="item.itemValue">{{ item.itemName }}</el-radio>
  </el-radio-group>

  <el-radio-group v-else-if="tagType === 'radioButton'" button-style="solid" :value="getValueSting" :disabled="disabled" @input="handleInput">
    <el-radio-button v-for="(item, key) in dictOptions" :key="key" :label="item.itemValue">{{ item.itemName }}</el-radio-button>
  </el-radio-group>

  <el-select v-else-if="tagType === 'select'" :placeholder="placeholder" :disabled="disabled" :value="getValueSting" @change="handleInput">
    <el-option v-for="(item) in dictOptions" :key="item.itemValue" :value="item.itemValue" :label="item.itemName" />
  </el-select>
</template>
<script>
import { getDict } from '@/utils'
export default {
  name: 'DictSelectTag',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    dictCode: {
      type: String,
      default: ''
    }, // 必传 词典标识：如 sex
    type: {
      type: String,
      default: ''
    }, // 必传 组件类型：如 radio、radioButton、select
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dictOptions: [],
      tagType: ''
    }
  },
  computed: {
    getValueSting() {
      return this.value != null ? this.value.toString() : undefined
    }
  },
  watch: {
    dictCode: {
      immediate: true,
      handler() {
        this.initDictData()
      }
    }
  },
  created() {
    if (!this.type || this.type === 'list') {
      this.tagType = 'select'
    } else {
      this.tagType = this.type
    }
  },
  methods: {
    initDictData() {
      this.dictOptions = getDict(this.dictCode)
    },
    handleInput(val) {
      this.$emit('change', val)
      this.$emit('input', val)
    }
  }
}
</script>

<style scoped>
</style>
